<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import DocumentManager from './components/DocumentManager.vue'
</script>

<template>
  <div id="app" class="min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white dark:bg-gray-800 shadow-sm">
      <div class="container mx-auto px-4 py-4 flex justify-between items-center">
        <h1 class="text-xl font-bold text-gray-900 dark:text-white">RAG 智能问答系统</h1>
        <button id="theme-toggle" class="p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-700 dark:text-gray-300" viewBox="0 0 20 20" fill="currentColor">
            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
          </svg>
        </button>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-8">
      <div class="max-w-4xl mx-auto">
        <!-- 查询输入区 -->
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 mb-8">
          <h2 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">请输入您的问题</h2>
          <textarea
            v-model="query"
            class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-md bg-gray-50 dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
            rows="4"
            placeholder="在这里输入您的问题..."
          ></textarea>
          <div class="mt-4 flex justify-end">
            <button
              @click="submitQuery"
              :disabled="isLoading"
              class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md transition-colors disabled:opacity-50"
            >
              <span v-if="!isLoading">提交查询</span>
              <span v-if="isLoading">查询中...</span>
            </button>
          </div>
        </div>

        <!-- 文档管理区 -->
    <DocumentManager />

    <!-- 结果展示区 -->
        <div v-if="showResults" class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
          <h2 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">查询结果</h2>
          <div v-if="isLoading" class="flex justify-center py-10">
            <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
          </div>
          <div v-else>
            <div class="prose dark:prose-invert max-w-none mb-6" v-html="formattedAnswer"></div>

            <!-- 引用来源 -->
            <div v-if="sources.length > 0" class="mt-8">
              <h3 class="text-md font-semibold mb-3 text-gray-900 dark:text-white">引用来源</h3>
              <ul class="space-y-3">
                <li v-for="(source, index) in sources" :key="index" class="p-3 bg-gray-50 dark:bg-gray-700 rounded-md">
                  <p class="font-medium text-blue-600 dark:text-blue-400">{{ source.source }}</p>
                  <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">{{ source.content_preview }}</p>
                  <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">相关性: {{ source.score.toFixed(2) }}</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white dark:bg-gray-800 py-4 shadow-inner">
      <div class="container mx-auto px-4 text-center text-gray-600 dark:text-gray-400 text-sm">
        RAG 智能问答系统 © {{ new Date().getFullYear() }}
      </div>
    </footer>
  </div>
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
